import { View, Text, FlatList, Image, useWindowDimensions, Button } from 'react-native'
import React, { useEffect, useRef } from 'react'
import { baseURL } from '../service'

export default function ZhSwiper({list}) {
  // 获取手机屏幕的宽度
  const { width } =  useWindowDimensions()
  // 通过图片的宽高计算（600 : 180）
  const height = width * 180 / 600
  // 创建一个对组件的引用
  const swiperRef = useRef()
  // 定义变量，用于记录当前播放的图像的下标
  let imageIndex = 0

  // 渲染每一项
  const itemAd = ({item,index}) => {
    // index 每张图像下标
    return (
      <Image 
        source={{
          uri: baseURL+item.pic
        }}
        style={{width,height}}
      />
    )
  }
  // 播放下一张
  const next = () => {
    imageIndex++
    // 如果超过了最后1张，回到第1张
    if(imageIndex >= list.length) {
      imageIndex = 0
    }
    // 通过引用获取到FlatList组件
    // 滚动到指定位置,提供下标
    swiperRef.current.scrollToIndex({index: imageIndex})
  }
  // 当页面加载后，开启周期性定时器，每隔3秒钟往后播放一张图片
  useEffect(() => {
    // 用于保存定时器
    let timer = null
    // 生命周期：挂载以后 + 依赖的数据更新
    // 如果传递的数据中数据量超过1个，开启定时器
    if(list.length > 1) {
      timer = setInterval(next, 3000)
    }
    return () => {
      // 生命周期：组件卸载
      // 清除定时器
      clearInterval(timer)
    }
  },[list])

  return (
    <View>
      {/* <Button title='下一张' onPress={next} /> */}
      <FlatList 
        // 设置为水平排列
        horizontal={true}
        ref={swiperRef}
        data={list}
        renderItem={itemAd}
      />
    </View>
  )
}